<!DOCTYPE html>
<html lang="en">
<head>
    <title>生成订单</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--bootstrap-->
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <!--字体-->
    <link rel="stylesheet" type="text/css" href="css/font.css"/>
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
    <!--设置头部-->
    <link type="text/css" rel="stylesheet" href="css/jquery.mmenu.all.css" />
    <link type="text/css" rel="stylesheet" href="css/common.css">
    <script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>
    <script type="text/javascript" src="js/yj_style.js"></script>
    <link type="text/css" rel="stylesheet" href="css/static.css">
    <link type="text/css" rel="stylesheet" href="css/login.css">
    <!--设置下拉框-->
    <script type="text/javascript" src="js/yj_style.js"></script>
    <!--&lt;!&ndash;日期输入框&ndash;&gt;-->
    <!--<script src="js/bootstrap-datepicker.js"></script>-->
    <!--<script src="js/locales/bootstrap-datepicker.zh-CN.js"></script>-->
    <!--<link rel="stylesheet" type="text/css" href="css/bootstrap-datepicker.min.css">-->
    <!--&lt;!&ndash;轮播,搜索，商品列表&ndash;&gt;-->
    <!--<link rel="stylesheet" type="text/css" href="css/yj_supply_css.css">-->
    <!--<script src="js/yj_supply.js"></script>-->
    <!--&lt;!&ndash;轮播&ndash;&gt;-->
    <!--&lt;!&ndash;前三种&ndash;&gt;-->
    <!--<script src="js/jquery.luara.0.0.1.min.js"></script>-->
    <!--&lt;!&ndash;第四种和第五种&ndash;&gt;-->
    <!--<script src="js/unslider.min.js"></script>-->


</head>
<body>
<div class="head">
    <div class="header">
        <a href="#menu" class="header-a"><i class="fa fa-reorder head-style"></i></a>
        <span class="header-word">生成订单</span>
        <a href="${ctx }/customer/toIndex"><i class="fa fa-home head-style home-style"></i></a>
    </div>

    <nav id="menu">
        <ul>
            <li class="menu-li-head"><a href="hotel.html">酒店入住 <i class="fa fa-angle-double-right"></i></a></li>
            <li class="menu-li-head"><a href="${ctx }/customer/perfectInformation">完善信息 <i class="fa fa-angle-double-right"></i></a></li>
            <li class="menu-li-head"><a href="hotel.html">房间管理 <i class="fa fa-angle-double-right"></i></a></li>
            <li class="menu-li-head"><a href="groom.html">猜你喜欢 <i class="fa fa-angle-double-right"></i></a></li>
            <li class="menu-li-head"><a href="restaurant.html">餐馆美食 <i class="fa fa-angle-double-right"></i></a></li>
            <li class="menu-li-head"><a href="visiting.html">游玩攻略 <i class="fa fa-angle-double-right"></i></a></li>
            <li class="menu-li-head"><a href="traffic.html">交通指南 <i class="fa fa-angle-double-right"></i></a></li>
            <li class="menu-li-head"><a href="aboutus.html">关于我们 <i class="fa fa-angle-double-right"></i></a></li>
        </ul>
    </nav>

</div>
<div class="content" >
    <div>
    <h3 class="create-order-title">基本信息</h3>
    <div class="create-order">
        <div class="order-item">
            <div class="order-item-hotel-name">
                <span class="order-item-title">门店:</span>
                <span class="choosen-hotel-name">假日酒店</span>
            </div>
            <div class="order-item-hotel-name">
                <span class="order-item-title">房型:</span>
                <span class="choosen-hotel-name">总统套房</span>
            </div>
            <div class="order-item-hotel-num">
                <span clas="order-item-title">预定晚数：</span>
                <span class="choosen-hotel-num">2</span>晚
            </div>
            <div class="order-item-hotel-num">
                <span clas="order-item-title">总价：</span>
                <span class="choosen-hotel-num">500</span>元
            </div>
        </div>
    </div>
    </div>
    <div>
        <h3 class="create-order-title">预定信息</h3>
        <!--设置外面的虚线框-->
        <div class="create-order">
            <!--设置里面的内容-->
            <div class="order-item">
                <div class="order-item-hotel-name">
                    <span class="order-item-title">房号:</span>
                    <span class="choosen-hotel-name">104</span>
                </div>
                <div class="order-item-hotel-name">
                    <span class="order-item-title">入住时间:</span>
                    <span class="choosen-hotel-name">2016-3-21</span>
                </div>
                <div class="order-item-hotel-name">
                    <span class="order-item-title">离房时间:</span>
                    <span class="choosen-hotel-name">2016-3-23</span>
                </div>
                <div class="order-item-hotel-name">
                    <span class="order-item-title">联系人信息:</span>
                    <!--<div class="order-item-hotel-name">-->
                        <!--<input class="login-in-input" placeholder="姓名"/>-->
                    <!--</div>-->
                    <!--<div class="order-item-hotel-name">-->
                        <!--<input class="login-in-input" placeholder="电话">-->
                    <!--</div>-->
                    <label>
                    <select class="friends_list">
                        <option value="白雪公主">白雪公主</option>
                        <option value="小矮人">小矮人</option>
                        <option value="李二">李二</option>
                        <option value="张三">张三</option>
                    </select>
                    </label>
                    <button class="create_new" data-target="#create_friends" data-toggle="modal"><i class="fa fa-plus-circle create_new_i"></i>新建</button>
                </div>

            </div>
        </div>
    </div>
    <div class="order-submit choose-room-next-step" data-toggle="modal" data-target="#paying">
        <button class="submit-now">提交订单</button>
    </div>

    <!-- 模态框（Modal）判断是否要提交订单 -->
    <div class="modal fade" id="paying" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 200px;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        提示
                    </h4>
                </div>
                <div class="modal-body">
                    是否立即缴纳押金
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default">
                        <a href="orderstep4.html" class="modal-default">否</a>
                    </button>
                    <button type="button" class="btn btn-primary">
                        <a href="orderstep3.html" class="modal-right">是</a>
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

        <!-- 模态框（Modal） -->
        <div class="modal fade" id="create_friends" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 100px;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close"
                                data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title">
                            联系人信息
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="order-item-hotel-name">
                        <input class="login-in-input" placeholder="姓名" id="friends_name"/>
                        </div>
                        <div class="order-item-hotel-name">
                        <input class="login-in-input" placeholder="电话" id="friends_phone">
                        </div>
                        <div class="order-item-hotel-name">
                            <input class="login-in-input" placeholder="身份证" id="friends_id">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">
                            <a href="orderstep3.html" class="modal-default">取消</a>
                        </button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">
                            <a class="modal-right"  onclick="add_friends(this)">确定</a>
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
</div>
<div class="footer">
    <p class="footer-bottom">
        <a href="${ctx }/customer/toIndex">首页</a>
        <span class="footer_vertical_line">|</span>
        <a href="groom.html">推荐</a>
        <span class="footer_vertical_line">|</span>
        <a href="management.html">管理</a>
        <span class="footer_vertical_line">|</span>
        <a href="aboutus.html">我们团队</a>

    </p>

</div>

</body>
</html>